<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>CSS定位实现图片放大效果</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<div class="listbox">
		<h3>Hoverbox Image Gallery</h3>
		<div class="list">
			<div class="pic">
				<img src="img/pic1.jpg" alt="图片加载失败！">
				<img src="img/pic1.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic2.jpg" alt="图片加载失败！">
				<img src="img/pic2.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic3.jpg" alt="图片加载失败！">
				<img src="img/pic3.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic4.jpg" alt="图片加载失败！">
				<img src="img/pic4.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic5.jpg" alt="图片加载失败！">
				<img src="img/pic5.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic6.jpg" alt="图片加载失败！">
				<img src="img/pic6.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic7.jpg" alt="图片加载失败！">
				<img src="img/pic7.jpg" alt="图片加载失败！">
			</div>
			<div class="pic">
				<img src="img/pic8.jpg" alt="图片加载失败！">
				<img src="img/pic8.jpg" alt="图片加载失败！">
			</div>
			<div style="width:1020px;height:410px;border-bottom:1px dashed black;margin-bottom:10px;"></div>
			<p class="class1">XHTML CSS 508 | Hoverbox BY Nathan Smith | Read the Tutoriual</p>
		</div>
	</div>
</body>

</html>